import countPath from './CountPath';
import zrender from 'zrender';

/**
 * @desc path class
 */
export default class Path {
    constructor(path, onPathContextMenu, bezier = false) {
        this.path = path;
        this.group = new zrender.Group();
        this.onPathContextMenu = onPathContextMenu;
        this.bezier = bezier;
    }

    rePath() {
        const child = this.group.children();
        const { points, todire } = this.group.data;
        if (this.bezier) {
            const [x1, y1] = points[0];
            const [x2, y2] = points[points.length - 1];
            const center = {
                x: (x1 + x2) / 2,
                y: (y1 + y2) / 2
            };
            child[0].shape = { x1, y1, x2, y2, cpx1: x1, cpy1: center.y, cpx2: x2, cpy2: center.y };
        }
        child[0].shape.points = points;
        child[0].dirty();
        child[1].shape.points = this.getArrowPoints(points, todire);
        child[1].dirty();
    }

    getArrowPoints(points, todire) {
        // 绘制箭头
        const arrowPoints = [];
        const [x0, y0] = points[points.length - 1];
        arrowPoints.push([x0, y0]);
        const a = 8,
            b = 5;
        switch (todire) {
            case 'left':
                arrowPoints.push([x0 - a, y0 - b]);
                arrowPoints.push([x0 - a, y0 + b]);
                break;
            case 'right':
                arrowPoints.push([x0 + a, y0 - b]);
                arrowPoints.push([x0 + a, y0 + b]);
                break;
            case 'top':
                arrowPoints.push([x0 - b, y0 - a]);
                arrowPoints.push([x0 + b, y0 - a]);
                break;
            case 'bottom':
                arrowPoints.push([x0 - b, y0 + a]);
                arrowPoints.push([x0 + b, y0 + a]);
                break;
        }
        return arrowPoints;
    }

    getPath() {
        // 计算连线
        this.path.points = countPath.countLinePoints(this.path);
        this.group.data = this.path;
        let style = this.path.style || {};
        // debugger;
        // const path = new zrender.Polyline({
        //     cursor: 'default',
        //     shape: { points: this.path.points },
        //     style: {
        //         lineDash: style.lineDash ? style.lineDash : null,
        //         lineWidth: style.lineWidth || 2,
        //         stroke: style.stroke || '#000',
        //         opacity: style.opacity ? style.opacity : 0.3
        //     },
        //     z: 1
        // });
        let path = null;
        // console.log(this.path.points);

        // 控制点取中点。绘制贝塞尔曲线,就成了弧形
        if (this.bezier) {
            const [x1, y1] = this.path.points[0];
            const [x2, y2] = this.path.points[this.path.points.length - 1];
            const center = {
                x: (x1 + x2) / 2,
                y: (y1 + y2) / 2
            };
            path = new zrender.BezierCurve({
                cursor: 'default',
                shape: {
                    x1,
                    y1,
                    x2,
                    y2,
                    cpx1: x1,
                    cpy1: center.y,
                    cpx2: x2,
                    cpy2: center.y,
                    points: this.path.points
                },
                style: {
                    fill: 'transparent',
                    lineDash: style.lineDash ? style.lineDash : null,
                    lineWidth: style.lineWidth || 1,
                    stroke: style.stroke || '#000',
                    opacity: style.opacity ? style.opacity : 1
                },
                z: 100
            });
        } else {
            path = new zrender.Polyline({
                cursor: 'default',
                shape: { points: this.path.points, smooth: 0 },
                style: {
                    lineDash: style.lineDash ? style.lineDash : null,
                    lineWidth: style.lineWidth || 1,
                    stroke: style.stroke || '#000',
                    opacity: style.opacity ? style.opacity : 1
                },
                z: 100
            });
        }

        const arrow = new zrender.Polygon({
            cursor: 'default',
            shape: { points: this.getArrowPoints(this.path.points, this.path.todire) },
            style: {
                fill: style.stroke || '#000',
                opacity: style.opacity ? style.opacity : 0.5
            },
            z: 1
        });
        this.group.add(path);
        this.group.add(arrow);
        this.group.on('contextmenu', this.onPathContextMenu);
        return this.group;
    }
}
